<template>
    <div class='icons'>
        <swiper :options="swiperOptions">
             <swiper-slide v-for="(page, index) of pages" :key='index'>
                <div class='icon' v-for='item of page' :key='item.id'>
                    <div class="icon-img">
                        <img class='icon-img-content' :src='item.imgUrl' alt="">
                    </div>
                    <p class='icon-desc'>{{item.desc}}</p>
                </div>
              </swiper-slide>
        </swiper>
    </div>
</template>

<script>
export default{
  name: 'HomeIcons',
  props: {
    iconList:Array
  },
  data () {
      return {
        swiperOptions:{
          autoplay:false
        }
      }
  },
  // 计算属性是根据其他属性计算出来生成一组新的结果，自带缓存机制
  computed: {
    pages () {
      const pages = []
      this.iconList.forEach((item, index) => {
        const page = Math.floor(index / 8)
        if (!pages[page]) {
          pages[page] = []
        }
        pages[page].push(item)
      })
      return pages
    }
  }
}
</script>
<style lang="stylus" scoped>
@import '~@styles/varibles.styl'
@import '~@styles/mixins.styl'
.icons >>> .swiper-container
 height 0;
 padding-bottom 50%;
.icons
 margin-top 0.1rem
.icon
    position relative;
    width 25%;
    overflow hidden;
    height 0;
    padding-bottom 25%;
    float left;

 .icon-img
   position absolute;
   top:0;
   left:0;
   bottom 0.44rem;
   box-sizing border-box;
   padding .1rem;

.icon-img-content
  display block;
  margin 0 auto;
  height 100%;

.icon-desc
   width 90% ;
   position absolute;
   left:0;
   bottom 0;
   height 0.44rem;
   line-height 0.44rem;
   text-align center;
   color $darkTextColor;
   ellipsis();
</style>
